<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <router-link :to="{ path: '/activity/add' }">
          <Button
            type="primary"
            icon="md-add"
            style="margin: 0 10px"
            v-if="Validation.check(Resources.BANNERS_ADD)"
          >新增活动
          </Button>
        </router-link>
        <Input
          placeholder="请输入活动名称"
          v-model="bloc.form.ActivityName"
          style="width: 180px"
        />
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="modifyItem(row)"
              v-if="Validation.check(Resources.ACTIVITY_UPDATE) && bloc.logintype !== '2' && tepee!=='2'"
              type="info"
            >编辑
            </Button>
            <Button
              size="small"
              @click="toDetail(row.id)"
              type="info"
            >查看奖品列表
            </Button>
            <Button
              size="small"
              @click="removeItem(row)"
              v-if="Validation.check(Resources.ACTIVITY_RESTART) && bloc.logintype !== '2'"
              type="warning"
            >重置
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { ActivityBloc } from '@/view/activity/ActivityBloc';
    import { Activity } from '@/base/model/Activity';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    import { store } from '@/store/Store';
    import {isEmpty} from '@/base/util/Strings';
    const columns = (bloc: ActivityBloc) => [
        {
            title: '活动名称',
            key: 'ActivityName',
            align: 'left',
            minWidth: 50,
            tooltip: true
        },
        {
            title: '每次抽奖所需积分',
            key: 'PointsNeed',
            align: 'left',
            minWidth: 50,
            tooltip: true
        },
        {
            title: '默认参与上限',
            key: 'InvovleTimes',
            align: 'left',
            minWidth: 50,
            tooltip: true
        },
        {
            title: '奖池种类',
            key: 'Isfinite',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.Isfinite === 1
                            ? '2号奖池'
                            : '1号奖池'
                    }
                });
            },
            align: 'left',
            minWidth: 50,
            tooltip: true
        },
        {
            title: '奖池剩余数量',
            key: 'Isfinite',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.Isfinite === 1
                            ? '无限'
                            : params.row.RemainNum
                    }
                });
            },
            align: 'left',
            minWidth: 50,
            tooltip: true
        },
        {
            title: '活动开始时间',
            key: 'StartTime',
            width: 200,
            align: 'left'
        },
        {
            title: '活动结束时间',
            key: 'EndTime',
            width: 200,
            align: 'left'
        },
        {
            title: '操作',
            slot: 'action',
            width: 300,
            align: 'left',
            fixed: 'right'
        }
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                // vm.bloc
                //     .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                //     .catch((e) => {
                //         vm.$Message.error('操作错误');
                //     });

                // if (store.state.user.tepee == '2') { // 隐藏经销商栏目
                //     this.columns = this.columns.filter(column => column.key !== 'agentName');
                // }
            });
        }
        bloc: ActivityBloc = new ActivityBloc();
        Validation = Validation;
        Resources = Resources;
        columns = columns(this.bloc);

        public row: any;
        removeItem(row) {
            this.row = row;
            this.$Modal.confirm({
                title: '提示',
                content: '重置后将无法恢复！还要继续吗？',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                    // this.bloc.removeItem(row)
                    //     .then((res) => {
                    //         if (res.name === '') {
                    //             this.$Message.success('重置成功');
                    //         } else {
                    //             this.$Message.error('重置失败');
                    //         }
                    //     }).finally(() => {
                    //     this.bloc.reset();
                    // });
                }
            });
        }

        modifyItem(dataItem: Activity) {
            this.$router.push({
                path: '/banners/wishesList/edit/' + dataItem.id});
        }
        get tepee() {
            this.bloc.logintype = store.state.user.tepee;
            // if (store.state.user.tepee == '2') { // 隐藏经销商栏目
            //     this.columns = this.columns.filter(column => column.key !== 'agentName');
            // }
            return store.state.user.tepee
        }
        toDetail(id) {
            this.$router.push({
                path: '/activity/prizeList/detail/' + id
            });
        }
    }
</script>

<style lang="less" scoped>
  .color1 {
    color: #ffa500;
  }
  .color2 {
    color: #3da5f5;
  }
</style>
